<template>
  <div class="mainbox">
    <div class="column">
      <div class="panel">
        <myChart1 height="100%" width="100%" />
        <div class="panel-footer"></div>
      </div>

      <div class="panel">
        <myChart3 height="100%" width="100%" />
      </div>

      <div class="panel">
        <myChart5 height="100%" width="100%" />  
      </div>
    </div>
    <div class="column">
       <div class="map"> 
          <div class="map1"></div>
          <div class="map2"></div>
          <div class="map3"></div>
        </div>
    </div>
    <div class="column">
      <div class="panel">
         <myChart2 height="100%" width="100%" /> 
        <div class="panel-footer"></div>
      </div>
      <div class="panel">
        <myChart4  height="100%" width="100%" />
        <div class="panel-footer"></div>
      </div>
      <div class="panel">
        <myChart6 height="100%" width="100%" />  
        <div class="panel-footer"></div>
      </div>
    </div>
  </div>
</template>

<script>
import myChart1 from '@/components/Charts/airChart/myChart1.vue'
import myChart2 from '@/components/Charts/airChart/myChart2.vue'
import myChart3 from '@/components/Charts/airChart/myChart3.vue'
import myChart4 from '@/components/Charts/airChart/myChart4.vue'
import myChart5 from '@/components/Charts/airChart/myChart5.vue'
import myChart6 from '@/components/Charts/airChart/myChart6.vue'

export default {
  name: 'AirChart',
  components: { myChart1 , myChart2 ,myChart3 ,myChart4 , myChart5,myChart6}
}
</script>

<style lang="scss" scoped>
.mainbox{
  display: flex;
  min-height: calc(100vh - 84px);
  background: url(../../assets/chart-images/bg.jpg) no-repeat top center;
  .column{
    flex: 3
  }
  .column:nth-child(2){
    flex: 5;
    overflow: hidden;
    margin: 0 0.5rem 0.5rem;
  }

  .panel {
    position: relative;
    height: 14rem;
    padding: 0 1rem 0.52rem;
    border: 1px solid rgba(25, 186, 139, 0.17);
    margin-bottom: 1rem;
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }
    .panel-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      &::before {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
  }

  .map{
    position: relative;
    height: 32rem;
    .map1 {
      width: 22rem;
      height: 22rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: url(../../assets/chart-images/map.png);
      background-size: 100% 100%;
      opacity: 0.3;
    }
    .map2 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 24rem;
      height: 24rem;
      background: url(../../assets/chart-images/lbx.png);
      animation: rotate1 15s linear infinite;
      opacity: 0.6;
      background-size: 100% 100%;
    }

    .map3 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 24rem;
      height: 24rem;
      background: url(../../assets/chart-images/jt.png);
      animation: rotate2 10s linear infinite;
      opacity: 0.6;
      background-size: 100% 100%;
    }

    @keyframes rotate1 {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }
  
    @keyframes rotate2 {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100%  {
        transform: translate(-50%, -50%) rotate(-360deg);
      }
    }

  }

  


}
</style>

